多个iframe切换时，如何保持每个iframe的滚动位置

<button id="click1">百度</button>
<button id="click2">搜狐</button><br/>
<iframe id="iframe1" src="../echarts/barChart.html" style="height:500px;width:800px;display:block;"></iframe>
<iframe id="iframe2" src="../echarts/lineChart.html" style="height:500px;width:800px;display:none;"></iframe>
$("#click1").click(function(){
$('#iframe2').css("display","none");
$('#iframe1').css("display","block");
}
$("#click2").click(function(){
$('#iframe1').css("display","none");
$('#iframe2').css("display","block")；
});
现在有这样一段小代码，进入页面时显示的是iframe1（两个页面都是自己手写的简单页面），然后将该页面滚动，接着切换到iframe2，这时如果再次点击按钮回到iframe1时发现iframe1的滚动条置顶了，而不是停留在之前的滚动位置，但是如果iframe分别引用的是百度和搜狐的链接就不会发生这种现象。这是什么原因呢，如何在切换回iframe1的时候保持原来的滚动位置呢？